﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/reset.css">
    <link rel="stylesheet" href="../static/css/report1.css">
    <link rel="stylesheet" href="../static/css/moniter.css">
    <link rel="stylesheet" href="../static/css/laydate.css">
    <script src="../static/js/laydate.js"></script>
    <title>容智车联车厢管家</title>
    <style>
        .table01-lj table tbody {
            height: 140px;
        }
        .table01-lj {
            height: 192px;
        }
        .map-b-div {
            height: 242px;
        }
        .map-t-div {
            padding-bottom: 254px;
        }
        .table th, .table td {
            padding:2px 8px;

        }
        .table01-lj tr{height:35px;}
        .table01-lj table thead, .table01-lj tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
            height: auto;
        }
        .showdiv{padding-top:50px;height:100%;box-sizing:border-box;}
        .displayN{display:none;}
        .pos-ablj{right:150px;}
        .position-r{position:relative;}
        .position-a{position:absolute;}
        .margin-b5{margin-bottom: 5px;}
        .margin-b15{margin-bottom: 15px;}
        .width100{width:100%;}
        .gongshi-box .same-set-int{box-sizing: border-box;height:35px;line-height: 35px;}
        .cover-bg{background: rgba(51, 51, 51, 0.8);
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            display: none;
            z-index: 10;}
        .gongshi-box{width:260px;height:300px;padding:20px 50px;border-radius: 5px;background: #fff;position:absolute;top:50%;left:50%;margin-left:-130px;margin-top:-160px;}
        .sure-btn{margin-top: 20px;}
    </style>
</head>
<body class="odd-body position-r">
<div class="position-a cover-bg">
    <div class="gongshi-box">
        <div id="close" style="
            position:  absolute;
            top: -14px;
            right: -14px;
            width: 30px;
            height: 30px;
            background-color: #00a344;
            border-radius:60px;
            background-image: url(../static/images/guanbi.png);
            background-repeat:no-repeat;
            background-position:center center;
            background-size: 30px;
        "></div>
        <div><p class="margin-b5">选择车辆</p><select class="width100 margin-b15 same-set-int" id="scarstring"></select></div>
        <div><p class="margin-b5">开始时间</p><input type="text" id="test1" class="width100 margin-b15 same-set-int"></div>
        <div><p class="margin-b5">结束时间</p><input type="text" id="test2" class="width100 margin-b15 same-set-int"></div>
        <div><button type="button" class="width100 margin-b15 same-set-int sure-btn">确定</button></div>
    </div>
</div>
<div class="container-fluid" style="padding:0">
    <div class="row-fluid">
        <!--------------------------以下是侧边栏---------------------------------->
        <div class="span3  bg-white pad-10 bdradius"  style="width: 20%">
<div class="height100 pos-re">
            <div class="search-lj" style="overflow:hidden;" >
                <form class="navbar-search">
                    <input type="text" class="search-query input-medium m-l-25" placeholder="搜索中转站" id="searchStation"/>
                </form>
            </div>
           <div class="ul-lj">
            <ul id="vehi-list" >
                <#--<#list stationList as station>
                    <li class=" p-bt-10 b-botom pos-re" value="${station.id!""}">
						<a href="javascript:void(0);" title='${station.name!""}（52辆）'>
							<span class="txt-limit getCars" name="${station.id!""}">${station.name!""}（52辆）</span>
						</a>
                        <span class="txt-num"></span>
                        <ul class="dis-no" id="carList">
                        &lt;#&ndash;<li class=" p-bt-10">粤B3959457</li>
                                    <li class=" p-bt-10">粤B3959457</li>
                                    <li class=" p-bt-10">粤B3959457</li>
                                    <li class=" p-bt-10">粤B3959457</li>
                                    <li class=" p-bt-10">粤B3959457</li>&ndash;&gt;
                        </ul>
                    </li>
                </#list>-->
				<#list stationList as station>
                    <li class=" p-bt-10 b-botom pos-re">
                        <a href="javascript:void(0);" title='${station.name!""}（${station.carCount!""}辆）'>
                            <span class="txt-limit getCars" name="${station.id!""}">${station.name!""}（${station.carCount!""}辆）</span>
                        </a>
                        <span class="txt-num"></span>
                        <ul class="carListNumbers">
						<#--<li class=" p-bt-10">粤B3959457</li>
                                <li class=" p-bt-10">粤B3959457</li>
                                <li class=" p-bt-10">粤B3959457</li>
                                <li class=" p-bt-10">粤B3959457</li>
                                <li class=" p-bt-10">粤B3959457</li>-->
                        </ul>
                    </li>
				</#list>
            </ul>
</div>
</div>
        </div>
        <!--------------------------以下是右边柱状图---------------------------------->
        <div class="span9 pull-right  pos-re lijia-div" >
<div class="pos-re height100 width100">
			<div class="map-t-div pos-re height100">
				<div class="row-fluid height100">
					<div class="mapdiv height100">
						<div class="span12 map-zone ov-h bdradius bg-white pos-re" style="height:100%" >
							<div class="pos-re tabChange" style="height: 50px;line-height: 30px;width: 100%;position:absolute;">
								<p class="pad-10 p-l-20 font-w">

								</p>
                                <div class="row pos-ab3 ov-h bdradius pos-ablj" style="cursor:pointer;">
                                    <span class="span6 twin-bg1 t-c takeout">导出</span>
                                </div>
								<div class="row pos-ab3 ov-h bdradius" style="cursor:pointer;">
									<span class="span6 twin-bg t-c">月度</span>
									<span class="span6 t-c">年度</span>
								</div>
							</div>
<div class="showdiv">
							<div class="map-zone2 showmap" id="main" style="height:100%;width: 100%;">
								<!--这里是柱状图容器-->
							</div>
<div class="map-zone2  showmap" id="main1" style="height:100%;width: 100%;">

							</div>
</div>
						</div>
					</div>
				</div>
			</div>
            <!--以下是饼图-->
            <div class="row-fluid  map-b-div">
                <div class="row span6 bg-white pad-10 bdbox bdradius pos-re" id="pie"  style="height:100%">
					<div class=" height100 pos-re">
						<h3 class="b-botom pos-ab divtable01-lj">单车工时</h3>
						<div class=" table01-lj">
							<div class="ov-h pos-re row-fluid" style="    height: 190px;">
								<div class="span6 part1" style="  height: 190px;" id="part1">
									
								</div>
								<div class="span6 part2" style="   height: 190px;" id="part2">
								
								</div>
							</div>
						</div>
					</div>
                </div>
                <!--以下是饼图右侧表格-->
                <div class="span6  bg-white pad-10 bdradius bdbox  pos-re" id="pieRight"  style="height:100%">
					<div class=" height100 pos-re">
						<h3 class="b-botom pos-ab divtable01-lj">单车工时 VS 场站工时</h3>
							<div class=" table01-lj">
<div class="table01-lj-inner">
							<table class="table"  style="height:100%;overflow: auto;word-break: keep-all" >
								<thead class="font-bold">
									<td></td>
									<td>装卸车</td>
									<#--<td>卸车</td>-->
									<td>空驶</td>
									<td>重驶</td>
									<td>空闲</td>
									<td>小计</td>
								</thead>
								<tbody id="gongshiR">
									<#--<tr>
										<td>单车工时</td>
										<td >98</td>
										<td>48</td>
										<td>66</td>
										<td>57</td>
										<td>475</td>
										<td>744</td>
									</tr>
									<tr>
										<td>场站平均工时</td>
										<td >113</td>
										<td>65</td>
										<td>79</td>
										<td>72</td>
										<td>415</td>
										<td>744</td>
									</tr>
									<tr>
										<td>单车工时占比</td>
										<td >13%</td>
										<td>6%</td>
										<td>9%</td>
										<td>8%</td>
										<td>64%</td>
										<td>100%</td>
									</tr>
									<tr>
										<td>场站平均工时占比</td>
										<td >15%</td>
										<td>9%</td>
										<td>11%</td>
										<td>10%</td>
										<td>56%</td>
										<td>100%</td>
									</tr>-->
								</tbody>
							</table>
</div>
						</div>
                    </div>
                </div>
            </div>
</div>
        </div>
    </div>
</div>
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/echarts.common.min.js"></script>
<script src="../static/js/task.js"></script>
<script src="../static/js/report1.js"></script>
<script>
    laydate.render({
        elem: '#test1'
    });
    laydate.render({
        elem: '#test2'
    });
    $(function () {
        $('#close').click(function(){
            $('.gongshi-box').hide();$('.cover-bg').hide();
            $('.cover-bg').hide();
        });

        $('.takeout').on('click',function(){
            $('.cover-bg').show();

            //通过clientId获取车辆列表
            //ajax start
            $.ajax({
                type: "POST",
                url: "../car/getCarsByClient",
                dataType : 'json',
                success: function(data){
                    $('#scarstring').html(data.msg);
                }
            });
            //ajax end


        });
        $('.sure-btn').on('click',function(){
            $('.cover-bg').hide();

            var carno = $('#scarstring').val();

            var ctime = $('#test1').val();
            var etime = $('#test2').val();

            location.href = "../report/exportReport?carno="+carno+"&cTime="+ctime+"&etime="+etime;



        });
$('.tabChange').on('click','span',function(){
$(this).addClass('twin-bg');
$(this).siblings('span').removeClass('twin-bg');
var index = $(this).index();
var table = $('.tabChange').siblings('.showdiv');
table.find('.showmap').css('display','none');
table.find('.showmap:eq('+index+')').css('display','block');
})
        $(document).on('click','.getCars',function(){
            var stationId = $(this).attr('name');
//            alert(stationId);
            $.ajax({
                type: "POST",
                url: "../car/getCarListByStationId",
                dataType:'json',
                data:{
                    "stationId":stationId
                },
                success:function(data){
                    if(data.status == "success")
                    {
                        var carString = data.msg;
//                        alert(carString);
                        $('.carListNumbers').html(carString);
                    }
                    else {
//                        alert(1111);
                    }
                }
            });

        });


        /**
         * 搜索触发事件
         */
        $("#searchStation").keyup(function(){
            var text = $(this).val();
//            alert(text);
            $.ajax({
                type: "POST",
                url: "../station/getStationByKey",
                dataType:'json',
                data:{
                    "text":text
                },
                success:function(data){
                    if(data.status == "success")
                    {

                        var str = data.stationList;
                        $('#vehi-list').html(str);
                    }
                    else {
//                        alert(1111);
                    }
                }
            });
        });

    })
window.onload=function(){
$('.showdiv').find('.showmap:eq(1)').css('display','none');
}
</script>
</body>
</html>
